<template>
  <div>
    <el-container>
      <!-- 头部 -->
      <el-header>
      完美核心系统
      <el-button icon="el-icon-circle-close-outline" @click="logout" style="float:right; cursor:pointer; margin-top:10px">退出</el-button>
      </el-header>
      <el-container>
        <!-- 左侧 -->
        <el-aside width="250px" v-show="isShow">
        <!-- 默认打开哪个选项 -->
          <el-menu
            default-active="1"
            class="el-menu-vertical-demo">
            <el-submenu index="1">
              <template slot="title">
                <!-- <i class="el-icon-edit-outline"></i> -->
                <span>会员管理</span>
              </template>
              <el-menu-item-group>
                <el-menu-item index="1-1"><router-link :to="{path:'/index/memberIndex', query: {first: '会员管理',second:'会员信息',flag:true}}">会员综合资料查询</router-link></el-menu-item>
              </el-menu-item-group>
            </el-submenu>
            <el-submenu index="2">
              <template slot="title">
                <!-- <i class="el-icon-mobile-phone"></i> -->
                <span>订单管理</span>
              </template>
              <el-menu-item-group>
                <el-menu-item index="2-1"><router-link  :to="{path: '/index/search1', query: {first: '订单管理',second:'订单查询',flag:true}}">订单查询</router-link></el-menu-item>
                <el-menu-item index="2-2"><router-link  :to="{path: '/index/search2', query: {first: '订单管理',second:'退货查询',flag:true}}">退货查询</router-link></el-menu-item>
                <el-menu-item index="2-3"><router-link  :to="{path: '/index/search3', query: {first: '订单管理',second:'补单查询',flag:true}}">补单查询</router-link></el-menu-item>
                <el-menu-item index="2-4"><router-link  :to="{path: '/index/search4', query: {first: '订单管理',second:'调差单查询',flag:true}}">调差单查询</router-link></el-menu-item>
              </el-menu-item-group>
            </el-submenu>
            <el-submenu index="3">
              <template slot="title">
                <!-- <i class="el-icon-document"></i> -->
                <span>业绩计酬管理</span>
              </template>
              <el-menu-item-group>
                <el-menu-item index="3-1"><router-link :to="{path: '/index/achievementSearch', query: {first: '业绩计酬管理',second:'业绩查询',flag:true}}">业绩查询</router-link></el-menu-item>
                <el-menu-item index="3-2"><router-link :to="{path: '/index/bonusManage', query: {first: '业绩计酬管理',second:'奖金管理',flag:true}}">奖金管理</router-link></el-menu-item>
                <el-menu-item index="3-3"><router-link :to="{path: '/index/bonusManage', query: {first: '业绩计酬管理',second:'资格名单查询',flag:true}}">资格名单查询</router-link></el-menu-item>
                <!-- <el-submenu index="3-3">
                  <template slot="title">大客户尊享计划查询</template>
                  <el-menu-item index="3-3-1">新增名单查询</el-menu-item>
                  <el-menu-item index="3-3-2">历史名单查询</el-menu-item>
                </el-submenu> -->
              </el-menu-item-group>
            </el-submenu>
            <el-submenu index="4">
              <template slot="title">
                <!-- <i class="el-icon-location"></i> -->
                <span>额度管理</span>
              </template>
              <el-menu-item-group>
                <el-menu-item index="4-1"><router-link :to="{path: '/index/limitSearch', query: {first: '额度管理',second:'服务中心综合额度',flag:true}}">服务中心综合额度</router-link></el-menu-item>
              </el-menu-item-group>
            </el-submenu>
            <el-submenu index="5">
              <template slot="title">
                <!-- <i class="el-icon-location"></i> -->
                <span>综合资料管理</span>
              </template>
              <el-menu-item-group>
                <el-menu-item index="5-1"><router-link to="">资格考核名单查询</router-link></el-menu-item>
                <el-menu-item index="4-1"><router-link to="">服务中心查询</router-link></el-menu-item>
                <el-menu-item index="5-1"><router-link to="">保险名单查询</router-link></el-menu-item>
                <el-menu-item index="4-1"><router-link to="">服务公司查询</router-link></el-menu-item>
                <el-menu-item index="4-2"><router-link to="">产品查询</router-link></el-menu-item>
              </el-menu-item-group>
            </el-submenu>
            <el-submenu index="6">
              <template slot="title">
                <!-- <i class="el-icon-document"></i> -->
                <span>发放管理</span>
              </template>
              <el-menu-item-group>
                <el-submenu index="6-1">
                  <template slot="title">计算&分配</template>
                  <el-menu-item index="6-1-1">个人佣金汇总表</el-menu-item>
                  <el-menu-item index="6-1-2">个人佣金统计表</el-menu-item>
                </el-submenu>
                <el-submenu index="6-2">
                  <template slot="title">账款管理</template>
                  <el-menu-item index="6-2-1">冻结解冻</el-menu-item>
                  <el-menu-item index="6-2-2">补扣</el-menu-item>
                  <el-menu-item index="6-2-3">个人转款</el-menu-item>
                  <el-menu-item index="6-2-4">双人转款</el-menu-item>
                </el-submenu>
                <el-menu-item index="6-3">人才公司管理</el-menu-item>
                <el-menu-item index="6-4">披露资料管理</el-menu-item>
                <el-menu-item index="6-5">发放查询</el-menu-item>
                <el-menu-item index="6-6">直销员劳务费</el-menu-item>
                <el-menu-item index="6-7">电子礼券</el-menu-item>
                <el-menu-item index="6-8">服务公司服务费</el-menu-item>
                <el-menu-item index="6-9">服务中心服务费</el-menu-item>
                <el-menu-item index="6-10">人才公司劳务费</el-menu-item>
                <el-submenu index="6-11">
                  <template slot="title">发放设置</template>
                  <el-menu-item index="6-11-1">分配参数</el-menu-item>
                  <el-menu-item index="6-11-2">业务截停</el-menu-item>
                  <el-menu-item index="6-11-3">电子礼券</el-menu-item>
                  <el-menu-item index="6-11-4">服务费分配设置</el-menu-item>
                  <el-menu-item index="6-11-4">发票设置</el-menu-item>
                  <el-menu-item index="6-11-4">劳务费分配设置</el-menu-item>
                  <el-menu-item index="6-11-4">残疾人免税&指定</el-menu-item>
                </el-submenu>
              </el-menu-item-group>
            </el-submenu>
          </el-menu>
        </el-aside>
        <!-- 右侧 -->
        <el-main style="position:relative">
          <!-- 面包屑导航 -->
          <div style="position:absolute; left: 0;" v-for="(item,index) in icon" v-show="index == iconIndex" @click="changeLeft">
            <img :src="item.url" alt="" style="width:40px; height:40px; margin-top:350px;">
          </div>
          <!-- 路由显示 -->
          <div class="content">
            <Banner></Banner>
            <router-view></router-view>
          </div>
          
        </el-main>
      </el-container>
    </el-container>
  </div>
</template>

<script>
import Banner from "./banner"
export default {
  name: 'App',
  data(){
    return {
      icon:[
        {
          url:require("../../assets/left.png")
        },
        {
          url:require("../../assets/right.png")
        }
      ],
      iconIndex:0,
      isShow:true
    }
  },
  methods:{
    changeLeft(){
      this.isShow = !this.isShow
      this.iconIndex == 0 ? this.iconIndex = 1 : this.iconIndex = 0
    },
    hideLeft(){
      this.isShow = false
      this.iconIndex = 1
    },
    showLeft(){
      this.isShow = true
      this.iconIndex = 0
    },
    // 退出登录
    logout(){
      this.$router.push({path:"/"})
    }
  },
  components:{
    Banner
  },
  created(){
    let that = this
    // document.onkeydown = function(e){
    //   if(e.keyCode == 17){
    //     that.changeLeft();
    //   }
    // }  
  }
}
</script>
<style scoped>
.content{
  margin:0 auto;
  background: #ffffff;
  min-height: 95%;
  padding: 20px;
  box-sizing: border-box;
  min-width: 1600px;
}
</style>
<style>
  *{
    margin:0;
    padding: 0
  }
  .el-container{
    height: 100vh
  }
 .el-header{
    background-color: #5b87ab;
    color: #333;
    text-align: center;
    line-height: 60px;
    height: 60px;
  }
  
  .el-aside {
    background-color: #ffffff;
    color: #333;
    height: 100%
  }
  .el-main {
    background-color: #f6f9f8;
    color: #333;
    height: 100%;
    padding-left: 40px!important
  }
  /*导航菜单下会有默认title，占位置*/
  .el-menu-item-group__title{
    display: none
  }
  .el-header{
    color:#ffffff;
    font-size: 25px;
  }
  a{
    text-decoration: none;
    color: #303133;
  }
  .my_banner{
    height: 5%;
  }
  
  /*左侧导航栏*/
  /* .el-menu-item{
    height: 30px!important;
    line-height: 30px!important;
  }
  .el-menu-item a{
    padding-left: 40px;
    font-size:17px;
  }
  .el-submenu__title{
    height: 45px!important;
    line-height: 45px!important;
    font-size:20px!important;
  }
  .el-submenu__title i{
    font-size: 20px
  } */
  /*表格*/
  /* .el-table td, .el-table th{
    padding:2px 0
  }
   */
   .cell{
    font-size: 16px
  }
</style>
